<template>
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow">
      <nav class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <router-link to="/" class="text-2xl font-bold text-primary">
            Cursor 学习
          </router-link>
          <div class="flex space-x-4">
            <router-link
              v-for="item in navItems"
              :key="item.path"
              :to="item.path"
              class="text-gray-600 hover:text-primary"
            >
              {{ item.name }}
            </router-link>
          </div>
        </div>
      </nav>
    </header>

    <main class="container mx-auto px-4 py-8">
      <slot></slot>
    </main>

    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-lg font-semibold mb-4">关于我们</h3>
            <p class="text-gray-400">
              提供全面的 Cursor 使用教程和最佳实践
            </p>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li v-for="item in navItems" :key="item.path">
                <router-link :to="item.path" class="text-gray-400 hover:text-white">
                  {{ item.name }}
                </router-link>
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">联系我们</h3>
            <p class="text-gray-400">
              邮箱：contact@cursor-learning.com
            </p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
const navItems = [
  { name: '首页', path: '/' },
  { name: '教程', path: '/tutorials' },
  { name: '视频', path: '/videos' },
  { name: '案例', path: '/cases' },
  { name: '文档', path: '/docs' },
  { name: '社区', path: '/community' },
  { name: '资源', path: '/resources' }
]
</script> 